<template>
    <div>
      <ul>
        <li v-for="(item,index) in videoData" :key="index">
          <div class="img">
            <img :src="item.thumb" alt="数据加载失败">
            <img :src="'./static/lyl/video.png'" alt="">
          </div>
          <p>{{item.video_title}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
  import * as search from "../../../api/search.js"
    export default {
      name: "SearchVideo",
      data(){
        return {
          videoData:[]
        }
      },
      beforeMount(){
        let parms = {page:1,per_page:10}
        search.videoSearch(parms).then(res=>{
          //console.log(res);
          this.videoData = res.data;
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 40px;
  }
  ul li .img{
    width: 320px;
    height: 200px;
    background: #dcdcdc;
    position: relative;
  }
  ul li .img img:nth-child(1){
    width: 320px;
    height: 200px;
  }
  ul li .img img:nth-child(2){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 54px;
  }
  ul li p{
    font-size: 28px;
    padding: 20px 0;
    text-align: center;
  }
</style>
